<template>
    <view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="listData && count">
        <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30">
            <view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{coreshopData.parameters.title}}</view>
            <u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="goServicesList()"></u-icon>
        </view>
        <view class="coreshop-divider">
            <view class="complete"></view>
        </view>
        <view class="coreshop-flex-direction-row coreshop-margin-bottom-10 coreshop-text-black" v-for="(item, key) in listData" :key="key" @click="goServicesDetail(item.id)">
            <view class="coreshop-flex">
                <view>
                    <u--image :src="item.thumbnail" mode="widthFix" width="96px" height="96px" radius="8"></u--image>
                </view>
                <view class="coreshop-flex coreshop-flex-direction coreshop-padding-left-10">
                    <view class="coreshop-font-15 u-line-2 coreshop-text-black">{{ item.title }}</view>
                    <view class="coreshop-font-11 coreshop-padding-top-5 coreshop-padding-bottom-3 u-line-2 coreshop-text-brown">{{ item.description }}</view>
                    <view class="coreshop-flex coreshop-align-center coreshop-padding-top-10  coreshop-padding-bottom-5">
                        <view class="coreshop-font-11 coreshop-bg-orange coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10" v-if="item.maxBuyNumber>0">限购{{item.maxBuyNumber}}</view>
                        <view class="coreshop-font-11 coreshop-bg-green coreshop-padding-2 coreshop-border-radius-4 coreshop-margin-right-10" v-if="item.maxBuyNumber==0">不限购</view>
                        <view class="coreshop-font-11 coreshop-bg-olive coreshop-padding-2 coreshop-border-radius-4">{{item.ticketNumber}}张券</view>
                    </view>

                    <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start" v-if="item.openStatus == 1 && item.lastTime > 0">
                        <view class="coreshop-font-12">仅剩：</view><u-count-down :time="item.lastTime*1000" format="DD天HH时mm分ss秒" autoStart></u-count-down>

                        <!--<u-count-down :time="item.lastTime*1000" :autoStart="true" format="DD天HH时mm分ss秒" @change="onChange($event,key)">
                            <view class="time coreshop-font-11">
                                <view class="coreshop-font-12">仅剩：</view>
                                <view class="time__custom" v-if="item.timeData.days>0">
                                    <text class="time__custom__item">{{ item.timeData.days }}</text>
                                </view>
                                <text class="time__doc" v-if="item.timeData.days>0">天</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ item.timeData.hours >= 10 ? item.timeData.hours :'0' +item.timeData.hours}}</text>
                                </view>
                                <text class="time__doc">:</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ item.timeData.minutes }}</text>
                                </view>
                                <text class="time__doc">:</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ item.timeData.seconds }}</text>
                                </view>
                            </view>
                        </u-count-down>-->
                    </view>
                    <view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start" v-if="item.openStatus == 2 && item.lastTime > 0">
                        <view class="coreshop-font-12">即将开始：</view><u-count-down :time="item.lastTime*1000" format="DD天HH时mm分ss秒" autoStart></u-count-down>
                        <!--<u-count-down :time="item.lastTime*1000" :autoStart="true" format="DD天HH时mm分ss秒" @change="onChange($event,key)">
                            <view class="time">
                                <view class="coreshop-font-12">即将开始：</view>
                                <view class="time__custom" v-if="item.timeData.days>0">
                                    <text class="time__custom__item">{{ item.timeData.days }}</text>
                                </view>
                                <text class="time__doc" v-if="item.timeData.days>0">天</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ item.timeData.hours>=10?item.timeData.hours:'0'+item.timeData.hours}}</text>
                                </view>
                                <text class="time__doc">:</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ item.timeData.minutes }}</text>
                                </view>
                                <text class="time__doc">:</text>
                                <view class="time__custom">
                                    <text class="time__custom__item">{{ item.timeData.seconds }}</text>
                                </view>
                            </view>
                        </u-count-down>-->
                    </view>

                    <view class="coreshop-flex coreshop-justify-between coreshop-flex-direction-row coreshop-align-center">
                        <view class="coreshop-flex coreshop-align-center">
                            <view class="coreshop-font-14 coreshop-text-red">￥{{ item.money  }}</view>
                        </view>
                        <view class="coreshop-buy-btn" v-if="item.openStatus != 3">马上抢</view>
                        <view class="coreshop-buy-btn-disabled" v-if="item.openStatus == 3">已结束</view>
                    </view>
                </view>
            </view>
            <view v-if="key+1 < listData.length">
                <view class="coreshop-divider">
                    <view class="serviceGood"></view>
                    <view class="dot">●</view>
                    <view class="serviceGood"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "coreshopServiceGood",
        data() {
            return {
                listData: [],
            }
        },
        props: {
            coreshopData: {
                type: Object,
                required: false,
            }
        },
        mounted() {
            this.listData = uni.$u.deepClone(this.coreshopData.parameters.list);
        },
        computed: {
            count() {
                return (this.listData.length > 0)
            }
        },
        methods: {
            onChange(e, key) {
                this.$set(this.listData[key], 'timeData', e)
            },
        },
    }
</script>

<style lang="scss" scoped>
    .time { display: flex; align-items: center;
        .time__custom { min-width: 18px; height: 18px; background-color: #3c9cff; border-radius: 4px; display: flex; justify-content: center; align-items: center;
            .time__custom__item { color: #fff; font-size: 10px; text-align: center; }
        }
    }
</style>
